<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="wangdali@qq.com">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>东方市智慧党建平台驾驶舱</title>
     <link rel="shortcut icon" href="favicon.ico" type="image/ico" />
     <link rel="stylesheet" href="css/edu.css">
     <script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
     <script type="text/javascript" src="js/echarts4.min.js"></script>
     <script type="text/javascript" src="js/edu.js"></script>
     <script type="text/javascript">
         <!--
         $(window).resize(function ()// 绑定到窗口的这个事件中
         {
             // var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
             var whdef = 100/916;// 表示1920的设计图,使用100PX的默认值
             var wH = window.innerHeight;// 当前窗口的高度
             var wW = window.innerWidth;// 当前窗口的宽度
             // var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             var rem = wH * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
             $('html').css('font-size', rem + "px");
             myChart1.resize();
             myChart2.resize();
             myChart3.resize();
             myChart4.resize();
             myChart5.resize();
             myChart6.resize();
             myChart7.resize();
         });
         //-->
     </script>
 </head>
 <body>
 <div class="container">
     <header><div class="herder_bg"></div>
        <a id="btn_title"  href="">东方市智慧党建平台管理驾驶舱</a>
        <a id="btn_build"  href="build.html">组织建设</a>
        <a id="btn_life"  href="life.html">组织生活</a>
        <a id="btn_edu"  href="edu.html">党员教育</a>
        <a id="btn_map"  href="map.html">党建地图</a>
     </header>
     <article>
         <div id="hideleft"></div>

         <div id="hideright"></div>

<!-- level 1 -->
         <div class="sun-div">
            <div class="div_left">
                <div class="sun-title"><span class="">信息阅读量趋势</span></div>
                <div id="ec1" class="left-ec" ></div>
            </div>
            <div class="div_mid">
                <table style="width: 100%">
                    <tr style="height: 0.5rem">
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">信息发布总条数</div>
                                <div class="sun-value">18</div>
                            </div>
                        </td>
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">信息浏览总次数</div>
                                <div class="sun-value">148</div>
                            </div>
                        </td>
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">书籍总数量</div>
                                <div class="sun-value">34218</div>
                            </div>
                        </td>
                    </tr>
                    <tr style="height: 0.5rem">
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">信息评论总次数</div>
                                <div class="sun-value">27</div>
                            </div>
                        </td>
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">信息点赞总次数</div>
                                <div class="sun-value">45</div>
                            </div>
                        </td>
                        <td style="width: 33%;">
                            <div class="sun-box">
                                <div class="sun-item">书籍阅读总分钟数</div>
                                <div class="sun-value">14</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="div_right">
                <div class="sun-title"><span class="">书籍阅读时长趋势</span></div>
                <div id="ec2" class="left-ec" ></div>
            </div>
         </div>

<!-- level 2 -->
         <div class="sun-div box-div">
            <div class="div_left50">
                <div class="sun-title"><span class="">最高人气书籍</span></div>
                <div id="ec3" class="left-ec" ></div>
            </div>
            <div class="div_right50">
                <div class="sun-title"><span class="">最受关注信息栏目</span></div>
                <div id="ec4" class="left-ec" ></div>
            </div>
        </div>

<!-- level 3 -->
        <div class="sun-div box-div">
            <div class="div_left">
                <div class="sun-title"><span class="">最热信息</span></div>
                <div id="ec5" class="left-ec" ></div>
            </div>
            <div class="div_mid">
                <div class="sun-title"><span class="">活跃度排名</span></div>
                <div id="ec6" class="left-ec" ></div>
            </div>
            <div class="div_right">
                <div class="sun-title"><span class="">书籍阅读时长排名</span></div>
                <div id="ec7" class="left-ec" ></div>
            </div>
        </div>
     </article>
     <footer style="position: fixed;bottom: 0;width:100%;text-align: center;font-size: 0.12rem;color: #6cbbe6;">&copy;2019, 东方市组织部</footer>
 <script type="text/javascript">
     var myChart1 = echarts.init(document.getElementById('ec1'));
     var myChart2 = echarts.init(document.getElementById('ec2'));
     var myChart3 = echarts.init(document.getElementById('ec3'));
     var myChart4 = echarts.init(document.getElementById('ec4'));
     var myChart5 = echarts.init(document.getElementById('ec5'));
     var myChart6 = echarts.init(document.getElementById('ec6'));
     var myChart7 = echarts.init(document.getElementById('ec7'));

     $(function () {
         $("#hideleft").toggle(
             function(){
                 $(".left_margin").animate({marginLeft:"-133%"});
                 $(".wrap").animate({marginLeft:0});
                 $(".center").animate({marginLeft:0});
             },
             function(){
                 $(".center").animate({marginLeft:"33%"});
                 $(".left_margin").animate({marginLeft:"-100%"});
             }
         );
         $("#hideright").toggle(
             function(){
                 $(".right_margin").animate({marginRight:"-133%"});
                 $(".wrap").animate({marginRight:0});
                 $(".center").animate({marginRight:0});
             },
             function(){
                 $(".center").animate({marginRight:"33%"});
                 $(".right_margin").animate({marginLeft:"-33%"});
             }
         );
     });
 </script>
 </body>
</html>
